{# Copyright (c) 2015-2017, NVIDIA CORPORATION.  All rights reserved. #}

{% from "helper.html" import print_flashes %}
{% from "helper.html" import print_errors %}
{% from "helper.html" import mark_errors %}

{% extends "layout.html" %}

{% block title %}
New Image Dataset
{% endblock %}

{% block nav %}
<li class="active"><a href="{{url_for('digits.dataset.images.generic.views.new')}}">New Dataset</a></li>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>New Image Dataset</h1>
</div>

<form action="{{url_for('digits.dataset.images.generic.views.create')}}" enctype="multipart/form-data" method="post">
    {{ form.hidden_tag() }}

    {{ print_errors(form) }}

    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="db-tabs" role="tablist">
                <li><a href="#db-prebuilt" role="tab" data-toggle="tab">Use Prebuilt LMDBs</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content well">
                <!-- Prebuilt -->
                <div class="tab-pane" id="db-prebuilt">
                    <div class="row">
                        <table class="table">
                            <tr>
                                <td></td>
                                <th>Images LMDB</th>
                                <th>Labels LMDB</th>
                            </tr>
                            <tr>
                                <td><b>Training</b></td>
                                <td class="form-group{{mark_errors([form.prebuilt_train_images])}}">
                                    {{ form.prebuilt_train_images(class='form-control autocomplete_path') }}
                                </td>
                                <td class="form-group{{mark_errors([form.prebuilt_train_labels])}}">
                                    {{ form.prebuilt_train_labels(class='form-control autocomplete_path') }}
                                </td>
                            </tr>
                            <tr>
                                <td><b>Validation</b></td>
                                <td class="form-group{{mark_errors([form.prebuilt_val_images])}}">
                                    {{ form.prebuilt_val_images(class='form-control autocomplete_path') }}
                                </td>
                                <td class="form-group{{mark_errors([form.prebuilt_val_labels])}}">
                                    {{ form.prebuilt_val_labels(class='form-control autocomplete_path') }}
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            <div class="form-group{{mark_errors([form.force_same_shape])}}">
                                {{ form.force_same_shape.label }}
                                {{ form.force_same_shape.tooltip }}
                                {{ form.force_same_shape(class='form-control') }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            <div class="form-group{{mark_errors([form.prebuilt_mean_file])}}">
                                {{ form.prebuilt_mean_file.label }}
                                {{ form.prebuilt_mean_file.tooltip }}
                                {{ form.prebuilt_mean_file(class='form-control autocomplete_path') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ form.method(style="display:none;") }}
    <script>
function update_db_tab(tabName) {
    $('select[name=method]').val( tabName );
}
$('#db-tabs a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        parts = e.target.href.split('-');
        update_db_tab( parts[parts.length-1] );
        });
$('#db-tabs a[href="#db-{{ form.method.data }}"]').tab('show');
    </script>

    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 well">
            <div class="form-group{{mark_errors([form.group_name])}}">
                {{ form.group_name.label }}
                {{ form.group_name(class='form-control') }}
            </div>
            <div class="form-group{{mark_errors([form.dataset_name])}}">
                {{ form.dataset_name.label }}
                {{ form.dataset_name(class='form-control') }}
            </div>
            <input type="submit" name="create-dataset" class="btn btn-primary" value="Create">
        </div>
    </div>

</form>

<script>
$(".explanation-tooltip").tooltip();
</script>

{% endblock %}
